<template>
    <div class="tshirt-editor">
      <button @click="downloadCanvasAsPNG">Download Image</button>
  
      <canvas id="tshirtCanvas" width="600" height="600"></canvas>
    </div>
  </template>
  
  <script>
  import { fabric } from 'fabric';
  import huli from './huli.png'
  import png11 from './11.png'
  import bg from './test3.png'
  import webp1 from './1.webp'
  
  export default {
    name: 'TshirtEditor',
    mounted() {
      this.initializeCanvas();
    },
    methods: {
      initializeCanvas() {
        var canvas = new fabric.Canvas('tshirtCanvas');
  
        fabric.Image.fromURL(bg, function(shirtImg) {
          shirtImg.scaleToWidth(600);
          shirtImg.scaleToHeight(600);
        shirtImg.set({
          left: 0,
          top: 0,
          selectable: false // 设置为不可选中，这样 logo 可以覆盖在其上
        });
        canvas.setBackgroundImage(shirtImg, canvas.renderAll.bind(canvas));
      });
  
      // 加载 logo 图片
      fabric.Image.fromURL(png11, function(logoImg) {
        logoImg.set({
          left: 250, // 初始位置
          top: 300,  // 初始位置
          angle: 0,  // 初始角度
          scaleX: 0.3, // 初始缩放比例
          scaleY: 0.3, // 初始缩放比例
          selectable: true, // 允许缩放和拖拽
          hasControls: true, // 允许控制点显示
          lockRotation: false, // 允许旋转
        });
  
        // 添加 logo 到画布
        canvas.add(logoImg);
  
        // 启用 logo 拖拽和缩放
        logoImg.setControlsVisibility({
          mt: true, // 顶部控制点
          mb: true, // 底部控制点
          ml: true, // 左侧控制点
          mr: true, // 右侧控制点
          bl: true, // 左下角控制点
          br: true, // 右下角控制点
          tl: true, // 左上角控制点
          tr: true  // 右上角控制点
        });
  
        // 刷新 canvas 渲染
        canvas.renderAll();
  
  
      });
      },
      downloadCanvasAsPNG() {
        const dataURL = this.canvas.toDataURL({
          format: 'png',  // 输出为 PNG 格式
          quality: 1,     // 设置图像质量
        });
  
        // 创建一个下载链接
        const link = document.createElement('a');
        link.href = dataURL;  // 设置链接指向合成图像
        link.download = 'tshirt-design.png';  // 设置下载的文件名
  
        // 模拟点击下载链接
        link.click();
      },
    },
  };
  </script>
  
  <style scoped>
  .tshirt-editor {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }
  canvas {
    border: 1px solid #000;
  }
  </style>
  